<md-dialog flex="70" ng-cloak>
    <form>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>Address Selection</h2>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="cancel()">
                    <i class="material-icons">close</i>
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content>
            <div class="md-dialog-content">
                <div class="row">
                    <div class="portlet light bordered" style="padding-bottom: 0;margin-bottom: 0">
                        <div class="portlet-title">
                            <div class="caption">
                                <span class="caption-subject bold"> Address</span>
                            </div>
                        </div>
                        <div class="portlet-body form form-horizontal" style="padding-bottom: 0;margin-bottom: 0">
                            <form>
                                <div class="row form-group">
                                    <div class="col-md-5">
                                        <organization-auto-complete name="organizationId" ng-model="searchInfo.organizationId"
                                                                    ng-disabled="cannotSwitchOrganization"
                                                                    allow-clear="true"></organization-auto-complete>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" ng-model="searchInfo.keyword" class="form-control" placeholder="Type any text to search" />
                                    </div>
                                    <div class="col-md-2" style="padding-left: 0px">
                                        <button class="btn blue" ng-click="search()"> Search </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- TABLE -->
                        <div class="portlet light box-shadow-none" style="padding-bottom: 0;margin-bottom: 0">
                            <div class="portlet-title">
                                <div class="caption">
                                    <span class="caption-subject bold"> Address Result</span>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div ng-show="!searchAddressCompleted" class="text-center">
                                    <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp;LOADING...</span>
                                </div>
                                <div ng-show="searchAddressCompleted" class="dataTables_wrapper no-footer">
                                    <div class="table-scrollable">
                                        <table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="sample_1" role="grid" aria-describedby="sample_1_info">
                                            <thead>
                                                <tr role="row">
                                                    <th>Select</th>
                                                    <th>Organization</th>
                                                    <th> Name </th>
                                                    <th> StoreNo </th>
                                                    <th> State </th>
                                                    <th> City </th>
                                                    <th> Zipcode </th>
                                                    <th> Fax </th>
                                                    <th> Phone </th>
                                                    <th> Address </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="address in addresses track by $index" ng-click="select($index)">
                                                    <td>
                                                        <input type="radio" name="address" ng-checked="selectedIndex===$index"/>
                                                    </td>
                                                    <td>{{address.organizationName}}</td>
                                                    <td>{{address.name}}</td>
                                                    <td>{{address.storeNo}}</td>
                                                    <td>{{address.state}}</td>
                                                    <td>{{address.city}}</td>
                                                    <td>{{address.zipCode}}</td>
                                                    <td>{{address.fax}}</td>
                                                    <td>{{address.phone}}</td>
                                                    <td>{{address.address}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
            <div style="margin-right: 20px">
                <button type=" button " ng-click="ok() " class="btn blue ">&nbsp;OK&nbsp;</button>
                <button type="button " ng-click="cancel() " class="btn default ">Cancel</button>
            </div>
        </md-dialog-actions>
    </form>
</md-dialog>
